<template>
  <Card background-color="#00289C" divider-color="#436BC0">
    <template #header-left>
      <view class="hb-flex hb-items-center hb-gap-2">
        <TImage width="96rpx" height="96rpx" :src="cardDetail.iconFileUrl" />
        <view class="hb-flex hb-flex-col hb-gap-1">
          <text class="hb-text-[32rpx] hb-leading-[40rpx] hb-text-white">
            {{ cardDetail.name }}
          </text>
          <AuthenticationTag :certificationType="cardDetail?.certificationType!" />
        </view>
      </view>
    </template>
    <view class="hb-flex hb-flex-col hb-gap-2 hb-w-full">
      <!-- 手机号 -->
      <view
        v-if="cardDetail.botInfoVo?.phone"
        class="hb-flex hb-items-center hb-w-full hb-justify-between hb-text-[#6893EF] hb-text-xs hb-leading-5"
      >
        <view class="hb-flex hb-items-center hb-gap-1">
          <tm-icon name="ali-icon icon-phone" :size="32" color="#6893EF" />
          <text>{{ cardDetail.botInfoVo?.phone }}</text>
        </view>
        <view @click="handleCall(cardDetail.botInfoVo?.phone)" class="hb-cursor-pointer">
          <text>联系</text>
        </view>
      </view>

      <!-- 微信号 -->
      <view
        v-if="cardDetail.botInfoVo?.wechatId"
        class="hb-flex hb-items-center hb-w-full hb-justify-between hb-text-[#6893EF] hb-text-xs hb-leading-5"
      >
        <view class="hb-flex hb-items-center hb-gap-1">
          <tm-icon name="ali-icon icon-weixin_fill" :size="32" color="#6893EF" />
          <text>{{ cardDetail.botInfoVo?.wechatId }}</text>
        </view>
        <view @click="handleCopy(cardDetail.botInfoVo?.wechatId)" class="hb-cursor-pointer">
          <text>复制</text>
        </view>
      </view>

      <!-- 邮箱 -->
      <view
        v-if="cardDetail.botInfoVo?.email"
        class="hb-flex hb-items-center hb-w-full hb-justify-between hb-text-[#6893EF] hb-text-xs hb-leading-5"
      >
        <view class="hb-flex hb-items-center hb-gap-1">
          <tm-icon name="ali-icon icon-youxiang1" :size="32" color="#6893EF" />
          <text>{{ cardDetail.botInfoVo?.email }}</text>
        </view>
        <view @click="handleCopy(cardDetail.botInfoVo?.email)" class="hb-cursor-pointer">
          <text>复制</text>
        </view>
      </view>
    </view>
  </Card>
</template>

<script setup lang="ts">
  import { BotCardInfo } from '@/api/card/type';
  import Card from '../../components/Card/index.vue';

  defineProps<{
    cardDetail: BotCardInfo;
  }>();

  // 处理拨打电话
  const handleCall = (phone?: string) => {
    if (!phone) return;
    uni.makePhoneCall({
      phoneNumber: phone,
    });
  };

  // 处理复制文本
  const handleCopy = (text?: string) => {
    if (!text) return;
    uni.setClipboardData({
      data: text,
      success: () => {
        uni.showToast({
          title: '复制成功',
          icon: 'success',
        });
      },
      fail: () => {
        uni.showToast({
          title: '复制失败',
          icon: 'none',
        });
      },
    });
  };
</script>
